<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>灵感库 - 灵犀智苑</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }

        :root {
            --primary: #4361ee;
            --primary-light: #5e72e4;
            --secondary: #4cc9f0;
            --accent: #ff2b56; /* 小红书主题色 */
            --light: #ecf0f1;
            --dark: #34495e;
            --darker: #2c3e50;
            --success: #27ae60;
            --text: #2c3e50;
            --text-light: #7f8c8d;
            --glass: rgba(255, 255, 255, 0.2);
            --border: rgba(255, 255, 255, 0.3);
            --shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
            --transition: all 0.3s ease;
        }

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
            color: var(--text);
            min-height: 100vh;
            overflow-x: hidden;
        }

        .background-blur {
            position: fixed;
            top: -50px;
            left: -50px;
            right: -50px;
            bottom: -50px;
            background: url('');
            filter: blur(40px);
            z-index: -1;
        }

        /* 玻璃拟态效果 */
        .glass {
            background: var(--glass);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid var(--border);
            box-shadow: var(--shadow);
            border-radius: 20px;
            overflow: hidden;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* 导航栏 */
        header {
            padding: 1rem 0;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 2rem;
            position: relative;
            z-index: 100;
        }

        .logo {
            display: flex;
            align-items: center;
            font-size: 1.8rem;
            font-weight: 700;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .logo-icon {
            margin-right: 10px;
            animation: float 3s ease-in-out infinite;
        }

        .nav-links {
            list-style: none;
            display: flex;
            gap: 2rem;
        }

        .nav-links a {
            color: var(--darker);
            text-decoration: none;
            font-weight: 500;
            padding: 8px 0;
            position: relative;
            transition: var(--transition);
        }

        .nav-links a:after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background: var(--primary);
            transition: var(--transition);
        }

        .nav-links a:hover:after,
        .nav-links a.active:after {
            width: 100%;
        }

        .nav-links a.active {
            color: var(--primary);
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
        }

        .btn {
            padding: 0.7rem 1.5rem;
            border-radius: 12px;
            border: none;
            cursor: pointer;
            font-weight: 500;
            transition: var(--transition);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }

        .btn-login {
            background: transparent;
            color: var(--darker);
            border: 1px solid var(--border);
        }

        .btn-login:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-2px);
        }

        .btn-signup {
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            color: white;
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.3);
        }

        .btn-signup:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(67, 97, 238, 0.4);
        }

        /* 主内容区域 */
        main {
            padding: 4rem 0;
        }

        .hero {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 3rem;
            margin-bottom: 2rem;
        }

        .hero-content {
            flex: 1;
            max-width: 600px;
        }

        .hero-content h1 {
            font-size: 3.5rem;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1.5rem;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .subtitle {
            font-size: 1.4rem;
            font-weight: 300;
            margin-bottom: 2.5rem;
            color: #4a5568;
        }

        .cta-container {
            display: flex;
            gap: 1.5rem;
        }

        .btn-primary {
            background: linear-gradient(90deg, var(--primary), var(--accent));
            color: white;
            padding: 1rem 2.5rem;
            border-radius: 15px;
            font-weight: 600;
            font-size: 1.1rem;
            border: none;
            cursor: pointer;
            box-shadow: 0 5px 20px rgba(114, 9, 183, 0.3);
            transition: var(--transition);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(114, 9, 183, 0.4);
        }

        .btn-secondary {
            background: transparent;
            color: var(--primary);
            border: 2px solid var(--primary);
            padding: 1rem 2.5rem;
            border-radius: 15px;
            font-weight: 600;
            font-size: 1.1rem;
            cursor: pointer;
            transition: var(--transition);
        }

        .btn-secondary:hover {
            background: rgba(67, 97, 238, 0.1);
            transform: translateY(-3px);
        }

        .hero-image {
            flex: 1;
            position: relative;
            height: 400px;
        }

        .floating-element {
            position: absolute;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow);
        }

        .floating-element:nth-child(1) {
            width: 250px;
            height: 300px;
            top: 0;
            right: 0;
            background: linear-gradient(45deg, rgba(67, 97, 238, 0.1), rgba(76, 201, 240, 0.1));
            animation: float 6s ease-in-out infinite;
        }

        .floating-element:nth-child(2) {
            width: 200px;
            height: 240px;
            top: 50px;
            right: 260px;
            background: linear-gradient(45deg, rgba(114, 9, 183, 0.1), rgba(67, 97, 238, 0.1));
            animation: float 5s ease-in-out infinite 0.5s;
        }

        .floating-element:nth-child(3) {
            width: 180px;
            height: 180px;
            top: 200px;
            right: 150px;
            background: linear-gradient(45deg, rgba(76, 201, 240, 0.1), rgba(114, 9, 183, 0.1));
            border-radius: 50%;
            animation: float 7s ease-in-out infinite 1s;
        }

        /* 小红书搜索框 */
        .search-section {
            margin: 0 auto 3rem;
            max-width: 900px;
            padding: 1.5rem;
        }
        
        .search-container {
            position: relative;
            max-width: 600px;
            margin: 0 auto;
        }
        
        #xiaohongshu-search {
            display: flex;
            border-radius: 50px;
            overflow: hidden;
            background: white;
            box-shadow: 0 5px 20px rgba(255, 43, 86, 0.15);
            border: 1px solid #ffe6ec;
        }
        
        #search-keyword {
            flex-grow: 1;
            padding: 18px 25px;
            font-size: 1.1rem;
            border: none;
            outline: none;
            color: var(--darker);
            background: transparent;
        }
        
        #search-keyword::placeholder {
            color: #ccc;
        }
        
        #search-btn {
            padding: 0 32px;
            background: var(--accent);
            color: white;
            font-size: 1.1rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: var(--transition);
        }
        
        #search-btn:hover {
            background: #ff1447;
        }
        
        .search-hint {
            text-align: center;
            margin-top: 15px;
            color: var(--text-light);
            font-size: 1.1rem;
        }
        
        .search-hint a {
            color: var(--accent);
            text-decoration: none;
            font-weight: 500;
            cursor: pointer;
        }
        
        .search-hint a:hover {
            text-decoration: underline;
        }
        
        #searchHint {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255, 255, 255, 0.95);
            padding: 20px 40px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            z-index: 100;
            display: none;
            text-align: center;
            animation: fadeIn 0.3s ease;
        }
        
        #searchHint p {
            font-size: 1.2rem;
            margin-bottom: 15px;
            color: var(--darker);
        }
        
        #searchHint .searchTerm {
            font-weight: bold;
            color: var(--accent);
        }
        
        #searchHint .loading {
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 4px solid rgba(255, 43, 86, 0.3);
            border-radius: 50%;
            border-top-color: var(--accent);
            animation: spin 1s linear infinite;
        }

        /* 小红书风格瀑布流布局 */
        .inspiration-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 25px;
            margin-top: 30px;
        }

        .inspiration-card {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            height: auto;
            border: 1px solid rgba(255, 255, 255, 0.5);
            position: relative;
            cursor: pointer;
        }

        .inspiration-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }

        .card-img {
            position: relative;
            overflow: hidden;
            border-radius: 16px 16px 0 0;
            aspect-ratio: 3/4;
            background-color: #f0f0f0;
        }

        .card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .inspiration-card:hover .card-img img {
            transform: scale(1.05);
        }

        .card-content {
            padding: 16px;
            display: flex;
            flex-direction: column;
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 10px;
            color: var(--darker);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .card-desc {
            font-size: 0.95rem;
            color: var(--text-light);
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            line-height: 1.5;
        }

        .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 5px;
        }

        .card-tag {
            background: rgba(255, 43, 86, 0.1);
            color: var(--accent);
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.8rem;
        }

        .card-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px solid rgba(0, 0, 0, 0.05);
            font-size: 0.9rem;
        }

        .card-likes {
            display: flex;
            align-items: center;
            gap: 5px;
            color: var(--text-light);
        }

        .card-likes i {
            color: var(--accent);
        }

        .card-date {
            color: var(--text-light);
            font-size: 0.85rem;
        }

        .card-author {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-top: 10px;
        }

        .author-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            overflow: hidden;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
        }

        .author-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .author-name {
            font-size: 0.9rem;
            color: var(--darker);
        }

        /* 详情模态框 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            overflow: auto;
            padding: 60px 0;
        }
        
        .modal-content {
            background: white;
            max-width: 1000px;
            margin: 0 auto;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
            animation: modalOpen 0.5s ease;
        }
        
        @keyframes modalOpen {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .modal-header {
            position: relative;
        }
        
        .modal-img {
            height: 500px;
            overflow: hidden;
            background-color: #f5f5f5;
        }
        
        .modal-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            cursor: pointer;
            transition: var(--transition);
            color: var(--text);
        }
        
        .modal-close:hover {
            background: white;
            transform: rotate(90deg);
        }
        
        .modal-badge {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: var(--primary);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: 500;
            font-size: 1.1rem;
        }
        
        .modal-body {
            padding: 30px;
        }
        
        .modal-title {
            font-size: 2rem;
            margin-bottom: 15px;
            color: var(--darker);
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .modal-subtitle {
            font-size: 1.2rem;
            color: var(--text-light);
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }
        
        .modal-details {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }
        
        .modal-features {
            margin-bottom: 25px;
        }
        
        .modal-features h4 {
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .feature-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 8px;
            background: #f9f9f9;
        }
        
        .feature-item i {
            color: var(--accent);
            font-size: 1.2rem;
        }
        
        .modal-description {
            margin-bottom: 25px;
        }
        
        .modal-description p {
            line-height: 1.8;
            margin-bottom: 15px;
        }
        
        .modal-gallery {
            margin-top: 20px;
        }
        
        .gallery-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 15px;
        }
        
        .gallery-item {
            height: 120px;
            border-radius: 10px;
            overflow: hidden;
            cursor: pointer;
            background-color: #f5f5f5;
        }
        
        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        
        .gallery-item:hover img {
            transform: scale(1.05);
        }
        
        .modal-footer {
            padding: 20px 30px;
            background: #f9f9f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .modal-actions {
            display: flex;
            gap: 15px;
        }
        
        .btn-icon {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 50px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            border: none;
        }
        
        .btn-icon.save {
            background: white;
            border: 1px solid #ddd;
            color: var(--text);
        }
        
        .btn-icon.save:hover {
            background: #f5f7fa;
        }
        
        .btn-icon.design {
            background: var(--accent);
            color: white;
        }
        
        .btn-icon.design:hover {
            background: #d35400;
        }

        /* 动画 */
        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-15px);
            }
            100% {
                transform: translateY(0px);
            }
        }
        
        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        /* 响应式设计 */
        @media (max-width: 1024px) {
            .hero {
                flex-direction: column;
                text-align: center;
            }
            
            .cta-container {
                justify-content: center;
            }
            
            .hero-image {
                margin-top: 3rem;
                width: 100%;
            }
            
            .modal-details {
                grid-template-columns: 1fr;
            }
            
            .modal-img {
                height: 400px;
            }
        }

        @media (max-width: 768px) {
            .navbar {
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .nav-links {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .hero-content h1 {
                font-size: 2.8rem;
            }
            
            .modal-img {
                height: 300px;
            }
            
            .gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            #search-btn {
                padding: 0 25px;
            }
        }
        
        @media (max-width: 480px) {
            .modal-img {
                height: 250px;
            }
            
            .gallery-grid {
                grid-template-columns: 1fr;
            }
            
            #xiaohongshu-search {
                flex-direction: column;
                border-radius: 20px;
            }
            
            #search-keyword {
                padding: 15px;
            }
            
            #search-btn {
                padding: 12px;
                border-radius: 0 0 20px 20px;
            }
        }
    </style>
</head>
<body>
    <div class="background-blur"></div>
    
    <header>
        <nav class="navbar glass">
            <div class="logo">
                <span class="logo-icon">✨</span>
                <span>灵犀智苑</span>
            </div>
            <ul class="nav-links">
                <li><a href="index.html">首页</a></li>
                <li><a href="design.html">AI设计</a></li>
                <li><a href="mall.html">家具商城</a></li>
                <li><a href="idea.html" class="active">灵感库</a></li>
                <li><a href="partner.html">商家合作</a></li>
            </ul>
            <div class="cta-buttons">
                <a href="login.html" class="btn btn-login glass">登录</a>
                <a href="register.html" class="btn btn-signup">免费注册</a>
            </div>
        </nav>
    </header>

    <main class="container">
        <section class="hero glass">
            <div class="hero-content">
                <h1>家居设计灵感库</h1>
                <p class="subtitle">探索数千种设计风格，找到最适合您家的装饰灵感</p>
            </div>
            <div class="hero-image">
                <div class="floating-element"></div>
                <div class="floating-element"></div>
                <div class="floating-element"></div>
            </div>
        </section>
        
        <!-- 小红书搜索区域 -->
        <section class="search-section glass">
            <div class="search-container">
                <form id="xiaohongshu-search">
                    <input type="text" id="search-keyword" placeholder="搜索你喜欢的家居风格..." aria-label="搜索关键词">
                    <button type="submit" id="search-btn">
                        <i class="fas fa-search"></i> 搜索
                    </button>
                </form>
                <div id="searchHint">
                    <p>正在搜索: <span class="searchTerm">北欧风家居</span></p>
                    <div class="loading"></div>
                </div>
            </div>
            <div class="search-hint">
                试试搜搜: <a id="try-search">北欧风家居</a>, <a id="try-search">现代简约家居</a>, <a id="try-search">日式原木家居</a>
            </div>
        </section>

        <section class="inspiration-library">
            <div class="inspiration-grid">
                <!-- 卡片 1 -->
                <div class="inspiration-card glass" data-id="1">
                    <div class="card-img">
                        <img src="https://qcloud.dpfile.com/pc/WOp29IuDlCTaRcwZGZ6-Y9uzMqhOTykcYES0vxoc_f8dWFMDZue1tv2d7Lpf3MXh.jpg" alt="现代简约客厅设计">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">现代简约客厅设计，小户型也能拥有的高级感</h3>
                        <p class="card-desc">浅灰色调与自然木色的完美搭配，简洁线条打造视觉延伸感。隐藏式收纳设计让空间更整洁，绿植点缀增添生机。</p>
                        <div class="card-tags">
                            <span class="card-tag">#现代简约</span>
                            <span class="card-tag">#客厅设计</span>
                            <span class="card-tag">#小户型</span>
                        </div>
                        <div class="card-author">
                            <div class="author-avatar">
                                <span>😊</span>
                            </div>
                            <div class="author-name">设计达人@灵犀小智</div>
                        </div>
                        <div class="card-actions">
                            <div class="card-likes">
                                <i class="fas fa-heart"></i> 2.5K
                            </div>
                            <div class="card-date">3天前</div>
                        </div>
                    </div>
                </div>
                
                <!-- 卡片 2 -->
                <div class="inspiration-card glass" data-id="2">
                    <div class="card-img">
                        <img src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzMxMDk2NzUzLjAxNDIxNDVfMTczMTA5Njc1My40OTQ0Ml8xNzMxMDk2NzUzLjkxNjA3MzY%3D%27/2.png" alt="温暖北欧风卧室">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">温暖北欧风卧室，打造舒适睡眠空间</h3>
                        <p class="card-desc">天然木材与棉麻材质的完美组合，柔和灯光营造放松氛围。开放式收纳展示心爱物品，绿植增添自然气息。</p>
                        <div class="card-tags">
                            <span class="card-tag">#北欧风</span>
                            <span class="card-tag">#卧室设计</span>
                            <span class="card-tag">#舒适睡眠</span>
                        </div>
                        <div class="card-author">
                            <div class="author-avatar">
                                <span>😀</span>
                            </div>
                            <div class="author-name">北欧设计爱好者</div>
                        </div>
                        <div class="card-actions">
                            <div class="card-likes">
                                <i class="fas fa-heart"></i> 3.2K
                            </div>
                            <div class="card-date">5天前</div>
                        </div>
                    </div>
                </div>
                
                <!-- 卡片 3 -->
                <div class="inspiration-card glass" data-id="3">
                    <div class="card-img">
                        <img src="https://img1.baidu.com/it/u=3416353124,1938085565&fm=253&app=138&f=JPEG?w=800&h=1067" alt="轻奢风餐厅设计">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">轻奢风餐厅设计，让用餐成为享受</h3>
                        <p class="card-desc">大理石餐桌与真皮拼色餐椅的精致搭配，金属元素点缀空间。创意造型顶灯营造温馨氛围，玻璃壁柜提升格调。</p>
                        <div class="card-tags">
                            <span class="card-tag">#轻奢风</span>
                            <span class="card-tag">#餐厅设计</span>
                            <span class="card-tag">#精致生活</span>
                        </div>
                        <div class="card-author">
                            <div class="author-avatar">
                                <span>😊</span>
                            </div>
                            <div class="author-name">轻奢生活家</div>
                        </div>
                        <div class="card-actions">
                            <div class="card-likes">
                                <i class="fas fa-heart"></i> 4.1K
                            </div>
                            <div class="card-date">1周前</div>
                        </div>
                    </div>
                </div>
                
                <!-- 卡片 4 -->
                <div class="inspiration-card glass" data-id="4">
                    <div class="card-img">
                        <img src="https://img95.699pic.com/photo/60009/8062.jpg_wh300.jpg!/fh/300/quality/90" alt="工业风个性客厅">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">工业风个性客厅，展现独特生活态度</h3>
                        <p class="card-desc">裸露砖墙与金属管道的粗犷美学，复古皮革沙发与工业风灯具。开放式空间设计，绿植软化工业感。</p>
                        <div class="card-tags">
                            <span class="card-tag">#工业风</span>
                            <span class="card-tag">#个性设计</span>
                            <span class="card-tag">#创意空间</span>
                        </div>
                        <div class="card-author">
                            <div class="author-avatar">
                                <span>🙂</span>
                            </div>
                            <div class="author-name">工业风设计师</div>
                        </div>
                        <div class="card-actions">
                            <div class="card-likes">
                                <i class="fas fa-heart"></i> 1.8K
                            </div>
                            <div class="card-date">2天前</div>
                        </div>
                    </div>
                </div>
                
                <!-- 卡片 5 -->
                <div class="inspiration-card glass" data-id="5">
                    <div class="card-img">
                        <img src="https://pic.rmb.bdstatic.com/bjh/bb8793d10bc/241114/2e2b8b25d5fb4a3a9170297d64d15c74.jpeg" alt="新中式禅意书房">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">新中式禅意书房，宁静致远的阅读空间</h3>
                        <p class="card-desc">传统元素与现代设计的完美融合，实木书桌与简约博古架。对称式布局，留白艺术营造宁静氛围。</p>
                        <div class="card-tags">
                            <span class="card-tag">#新中式</span>
                            <span class="card-tag">#书房设计</span>
                            <span class="card-tag">#禅意空间</span>
                        </div>
                        <div class="card-author">
                            <div class="author-avatar">
                                <span>😊</span>
                            </div>
                            <div class="author-name">东方美学传承者</div>
                        </div>
                        <div class="card-actions">
                            <div class="card-likes">
                                <i class="fas fa-heart"></i> 3.7K
                            </div>
                            <div class="card-date">4天前</div>
                        </div>
                    </div>
                </div>
                
                <!-- 卡片 6 -->
                <div class="inspiration-card glass" data-id="6">
                    <div class="card-img">
                        <img src="https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27576O5byP5Lmh5p2R6aOO5qC8XzE3MzMxOTU3MjEuNDY4NjU0Mg%3D%3D%27/0.png" alt="美式乡村风格厨房">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">美式乡村风格厨房，温馨实用的家庭空间</h3>
                        <p class="card-desc">复古格子瓷砖与实木橱柜，开放式置物架展示精美瓷器。暖色灯光营造温馨氛围，绿植点缀增添生机。</p>
                        <div class="card-tags">
                            <span class="card-tag">#美式乡村</span>
                            <span class="card-tag">#厨房设计</span>
                            <span class="card-tag">#温馨家庭</span>
                        </div>
                        <div class="card-author">
                            <div class="author-avatar">
                                <span>😀</span>
                            </div>
                            <div class="author-name">家庭生活设计师</div>
                        </div>
                        <div class="card-actions">
                            <div class="card-likes">
                                <i class="fas fa-heart"></i> 2.9K
                            </div>
                            <div class="card-date">1天前</div>
                        </div>
                    </div>
                </div>

                 <!-- 卡片 7 -->
                <div class="inspiration-card glass" data-id="7">
                    <div class="card-img">
                        <img src="https://pic.rmb.bdstatic.com/bjh/240921/41df6732d5e47984b9a140ca1d5e686948.jpeg" alt="现代简约卫生间">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">整洁舒适的家庭空间，让卫浴时光更惬意</h3>
                        <p class="card-desc">浅灰色几何墙砖与防滑地砖营造简洁大气的氛围，悬浮式浴室柜搭配嵌入式镜柜提供充足收纳空间。</p>
                        <div class="card-tags">
                            <span class="card-tag">#现代简约</span>
                            <span class="card-tag">#卫生间设计</span>
                            <span class="card-tag">#干湿分离</span>
                        </div>
                        <div class="card-author">
                            <div class="author-avatar">
                                <span>😊</span>
                            </div>
                            <div class="author-name">卫生间设计小亮</div>
                        </div>
                        <div class="card-actions">
                            <div class="card-likes">
                                <i class="fas fa-heart"></i> 3.7K
                            </div>
                            <div class="card-date">4天前</div>
                        </div>
                    </div>
                </div>

                <!-- 卡片 8 -->
                <div class="inspiration-card glass" data-id="8">
                    <div class="card-img">
                        <img src="https://img0.baidu.com/it/u=3791429446,711977747&fm=253&app=138&f=JPEG?w=1305&h=800" alt="侘寂风客厅">
                    </div>
                    <div class="card-content">
                        <h3 class="card-title">侘寂风客厅：质朴自然的治愈空间</h3>
                        <p class="card-desc">手工质感墙面搭配藤编吊灯，裸露梁结构与亚麻布艺沙发。微水泥地面融合原木茶几，自然光影透过纸灯笼营造柔和氛围。</p>
                        <div class="card-tags">
                            <span class="card-tag">#侘寂风</span>
                            <span class="card-tag">#客厅设计</span>
                            <span class="card-tag">#自然主义</span>
                        </div>
                        <div class="card-author">
                            <div class="author-avatar">
                                <span>🌿</span>
                            </div>
                            <div class="author-name">侘寂行者</div>
                        </div>
                        <div class="card-actions">
                            <div class="card-likes">
                                <i class="fas fa-heart"></i> 5.2K
                            </div>
                            <div class="card-date">5天前</div>
                        </div>
                    </div>
                </div>
                
            </div>
        </section>
    </main>

    <!-- 详情模态框 -->
    <div id="detail-modal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-img">
                    <img id="modal-main-img" alt="主图">
                </div>
                <div class="modal-close" id="close-modal">
                    <i class="fas fa-times"></i>
                </div>
                <div class="modal-badge">
                    <span id="modal-room">客厅</span> · <span id="modal-style">现代简约</span>
                </div>
            </div>
            
            <div class="modal-body">
                <h2 class="modal-title">
                    <i class="fas fa-palette"></i>
                    <span id="modal-title">现代简约客厅设计</span>
                </h2>
                
                <p class="modal-subtitle" id="modal-subtitle">
                    简洁线条与中性色调的完美融合，打造宽敞舒适的生活空间
                </p>
                
                <div class="modal-details">
                    <div class="modal-description">
                        <h4><i class="fas fa-align-left"></i> 设计描述</h4>
                        <p id="modal-description">这款现代简约客厅设计采用开放式布局，最大化利用自然光线。整体配色以浅灰色和白色为主，搭配温暖的原木色地板，营造出明亮通透的空间感。</p>
                    </div>
                    
                    <div class="modal-features">
                        <h4><i class="fas fa-star"></i> 设计特点</h4>
                        <div class="feature-list" id="modal-features">
                            <!-- 通过JS动态添加 -->
                        </div>
                    </div>
                </div>
                
                <div class="modal-gallery">
                    <h4><i class="fas fa-images"></i> 更多角度</h4>
                    <div class="gallery-grid" id="modal-gallery">
                        <!-- 通过JS动态添加 -->
                    </div>
                </div>
            </div>
            
            <div class="modal-footer">
                <div class="modal-actions">
                  
                </div>
                <div class="like-btn">
                    <i class="far fa-heart"></i> <span id="modal-likes">123</span>人喜欢
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const modal = document.getElementById('detail-modal');
            const closeModal = document.getElementById('close-modal');
            const cards = document.querySelectorAll('.inspiration-card');
            
            // 案例数据
            const caseData = {
                1: {
                    title: "现代简约客厅设计",
                    subtitle: "简洁线条与中性色调的完美融合，打造宽敞舒适的生活空间",
                    room: "客厅",
                    style: "现代简约",
                    description: "这款现代简约客厅设计采用开放式布局，最大化利用自然光线。整体配色以浅灰色和白色为主，搭配温暖的原木色地板，营造出明亮通透的空间感。L型布艺沙发选择浅灰色调，搭配几何图案的抱枕增添视觉趣味。圆形大理石茶几与沙发形成方圆对比，展现现代设计美学。电视背景墙采用简洁的悬浮式电视柜设计，上方隐藏式灯带提供柔和照明，下方设置开放式储物格，兼具美观与实用性。",
                    features: [
                        "中性色调：浅灰+白+原木",
                        "开放式空间布局",
                        "隐藏式间接照明",
                        "绿植点缀增添生机",
                        "混搭真皮沙发",
                        "几何元素装饰"
                    ],
                    likes: "2.5K",
                    mainImg: "https://qcloud.dpfile.com/pc/WOp29IuDlCTaRcwZGZ6-Y9uzMqhOTykcYES0vxoc_f8dWFMDZue1tv2d7Lpf3MXh.jpg",
                    gallery: [
                        "https://img1.baidu.com/it/u=3508003572,2844067975&fm=253&app=138&f=JPEG?w=500&h=667",
                        "https://qcloud.dpfile.com/pc/FS4UuC9C6jfZ9QP01U-2jFJvWoBHHE97tiPYIc0HpgZlz5pEXaAjfdXiOZWKlHBN.jpg",
                        "https://qcloud.dpfile.com/pc/DdiJ1KHZS-NY2vzBBeRxxnF_75xi058koMgsDa7Fbxjjdgdpp4QVbOE1cYpmkFqU.jpg"
                    ]
                },
                2: {
                    title: "温暖北欧风卧室",
                    subtitle: "自然材质与柔和色调的完美组合，打造温馨舒适的睡眠空间",
                    room: "卧室",
                    style: "北欧风",
                    description: "这款北欧风卧室设计注重自然材质与柔和色调的运用，营造出温馨舒适的睡眠环境。整体空间采用浅木色地板与白色墙面作为基调，搭配浅灰色床品与地毯，形成温暖而宁静的氛围。床头背景墙采用浅蓝色调，与白色形成清新对比。藤编床头柜与实木边几增添自然气息，床头吊灯提供柔和照明。开放式衣架设计既实用又美观，绿植点缀为空间增添生机。",
                    features: [
                        "天然材质：原木+棉麻",
                        "柔和色调与充足采光",
                        "简洁实用的家具设计",
                        "绿植元素增添生机",
                        "藤编元素装饰",
                        "柔和灯光设计"
                    ],
                    likes: "3.2K",
                    mainImg: "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzMxMDk2NzUzLjAxNDIxNDVfMTczMTA5Njc1My40OTQ0Ml8xNzMxMDk2NzUzLjkxNjA3MzY%3D%27/2.png",
                    gallery: [
                        "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzMxMDk2NzUzLjAxNDIxNDU%3D%27/0.png",
                        "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzMxMDk2NzUzLjAxNDIxNDVfMTczMTA5Njc1My40OTQ0Mg%3D%3D%27/1.png",
                        "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27LV8xNzMxMDk2NzUzLjAxNDIxNDVfMTczMTA5Njc1My40OTQ0Ml8xNzMxMDk2NzUzLjkxNjA3MzZfMTczMTA5Njc1NC40MDMxOTc1%27/3.png"
                    ]
                },
                3: {
                    title: "轻奢风餐厅设计",
                    subtitle: "精致材质与奢华元素的平衡，营造优雅舒适的用餐环境",
                    room: "餐厅",
                    style: "轻奢风",
                    description: "这款轻奢风餐厅设计融合了精致材质与奢华元素，打造出优雅舒适的用餐环境。大理石餐桌搭配丝绒餐椅，金色金属椅腿增添奢华感。创意吊灯作为空间焦点，提供柔和而华丽的光线。墙面采用浅灰色艺术涂料，搭配金属线条装饰，提升空间质感。开放式酒柜设计既实用又美观，展示精美餐具与酒具。大理石与背景墙提升整体格调。",
                    features: [
                        "高品质材料：大理石+金属",
                        "中性色搭配金属点缀",
                        "柔和的灯光设计",
                        "简约而不失高级感",
                        "艺术吊灯装饰",
                        "玻璃壁柜提升格调"
                    ],
                    likes: "4.1K",
                    mainImg: "https://img1.baidu.com/it/u=3416353124,1938085565&fm=253&app=138&f=JPEG?w=800&h=1067",
                    gallery: [
                        "https://img0.baidu.com/it/u=1135226811,3754788506&fm=253&app=138&f=JPEG?w=800&h=1067",
                        "https://img2.baidu.com/it/u=1350886542,433887429&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1067",
                        "https://img0.baidu.com/it/u=1135226811,3754788506&fm=253&app=138&f=JPEG?w=800&h=1067"
                    ]
                },
                4: {
                    title: "工业风个性客厅",
                    subtitle: "粗犷材质与个性元素的碰撞，展现独特生活态度",
                    room: "客厅",
                    style: "工业风",
                    description: "这款工业风客厅设计将粗犷材质与个性元素巧妙结合，创造出极具特色的生活空间。裸露的砖墙与金属管道展现原始美感，复古皮革沙发与工业风吊灯营造出独特的氛围。空间采用开放式设计，最大化利用自然光线。绿植点缀在工业感空间中增添生机，木制元素平衡了金属的冰冷感。悬挂式置物架既实用又具装饰性，展现出主人独特的品味与生活态度。",
                    features: [
                        "裸露砖墙与金属元素",
                        "开放式空间设计",
                        "复古与现代的碰撞",
                        "工业风灯具装饰",
                        "绿植软化工业感",
                        "个性悬挂式置物架"
                    ],
                    likes: "1.8K",
                    mainImg: "https://img95.699pic.com/photo/60009/8062.jpg_wh300.jpg!/fh/300/quality/90",
                    gallery: [
                        "https://gips3.baidu.com/it/u=2655188845,122925586&fm=3074&app=3074&f=JPEG?w=1024&h=994&type=normal&func=C",
                        "https://img1.baidu.com/it/u=3875157786,619426619&fm=253&app=138&f=JPEG?w=1400&h=800",
                        "https://img2.baidu.com/it/u=2650072374,237920863&fm=253&app=138&f=JPEG?w=1400&h=800"
                    ]
                },
                5: {
                    title: "新中式禅意书房",
                    subtitle: "传统与现代的完美融合，打造宁静致远的阅读空间",
                    room: "书房",
                    style: "新中式",
                    description: "这款新中式书房设计融合了传统元素与现代美学，创造出宁静致远的阅读空间。实木书桌与简约博古架展现东方美学，对称式布局体现中式设计的平衡感。空间运用大量留白艺术，营造出宁静致远的氛围。竹帘与宣纸灯罩传递中式意境，浅木色地板与白色墙面形成清新对比。文房四宝的精巧陈列，既实用又具装饰性，让整个空间充满文化气息与禅意。",
                    features: [
                        "实木家具与简约博古架",
                        "对称式空间布局",
                        "留白艺术营造禅意",
                        "竹帘与宣纸灯罩",
                        "文房四宝展示",
                        "浅木色与白色基调"
                    ],
                    likes: "3.7K",
                    mainImg: "https://pic.rmb.bdstatic.com/bjh/bb8793d10bc/241114/2e2b8b25d5fb4a3a9170297d64d15c74.jpeg",
                    gallery: [
                        "https://pic.rmb.bdstatic.com/bjh/bb8793d10bc/241114/623f70d5fc4272ea89af9c78ea34e784.jpeg",
                        "https://pic.rmb.bdstatic.com/bjh/bb8793d10bc/241114/b49bc2ae1e5902cc92138781214ffbda.jpeg",
                        "https://pic.rmb.bdstatic.com/bjh/bb8793d10bc/241114/598cacc823729012d49aa08ce57295b7.jpeg"
                    ]
                },
                6: {
                    title: "美式乡村厨房",
                    subtitle: "温馨实用的家庭空间，让烹饪成为享受",
                    room: "厨房",
                    style: "美式乡村",
                    description: "这款美式乡村厨房设计打造出温馨实用的家庭空间，让烹饪成为一种享受。复古格子瓷砖与实木橱柜营造经典乡村氛围，开放式置物架展示精美的瓷器与厨具。暖色灯光设计提供温馨的照明环境，白色吧台兼作早餐区与工作台。弧形窗增添田园气息，绿植点缀在窗台与角落，为厨房空间增添生机与自然气息。",
                    features: [
                        "复古白色格子瓷砖",
                        "实木橱柜与隐藏置物架",
                        "暖色灯光设计",
                        "白色吧台与绿植",
                        "弧形复古田园窗",
                        "实用型操作台"
                    ],
                    likes: "2.9K",
                    mainImg: "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27576O5byP5Lmh5p2R6aOO5qC8XzE3MzMxOTU3MjEuNDY4NjU0Mg%3D%3D%27/0.png",
                    gallery: [
                        "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27576O5byP5Lmh5p2R6aOO5qC8XzE3MzMxOTU3MjEuNDY4NjU0Ml8xNzMzMTk1NzIyLjMyODgxMjQ%3D%27/1.png",
                        "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27576O5byP5Lmh5p2R6aOO5qC8XzE3MzMxOTU3MjEuNDY4NjU0Ml8xNzMzMTk1NzIyLjMyODgxMjRfMTczMzE5NTcyMy4zMjI0MjdfMTczMzE5NTcyNC4yMjk4OTQ0XzE3MzMxOTU3MjUuMjI1Mjc2XzE3MzMxOTU3MjYuMDYwMjc5MV8xNzMzMTk1NzI2LjkxNDgxOTJfMTczMzE5NTcyNy43NTI4NjM0%27/7.png",
                        "https://miaobi-lite.bj.bcebos.com/miaobi/5mao/b%27576O5byP5Lmh5p2R6aOO5qC8XzE3MzMxOTU3MjEuNDY4NjU0Ml8xNzMzMTk1NzIyLjMyODgxMjRfMTczMzE5NTcyMy4zMjI0MjdfMTczMzE5NTcyNC4yMjk4OTQ0XzE3MzMxOTU3MjUuMjI1Mjc2%27/4.png"
                    ]
                },
                    7: {
                    title: "现代简约卫生间",
                    subtitle: "整洁舒适的家庭空间，让卫浴时光更惬意",
                    room: "卫生间",
                    style: "现代简约",
                    description: "这款简约现代卫生间设计打造出整洁舒适的家庭空间，让卫浴时光成为一种享受。浅灰色几何墙砖与防滑地砖营造简洁大气的氛围，悬浮式浴室柜搭配嵌入式镜柜提供充足收纳空间。无主灯智能照明系统提供柔和均匀的光线，岩板洗手台兼具美观与实用性。大面积磨砂玻璃窗引入自然光线，绿植与香薰点缀在角落，为卫生间增添生机与温馨气息。",
                    features: [
                        "浅灰色几何墙砖与防滑地砖",
                        "悬浮式哑光烤漆浴室柜",
                        "无主灯智能照明系统计",
                        "岩板洗手台与嵌入式镜柜",
                        "大面积磨砂玻璃窗",
                        "干湿分离淋浴区"
                    ],
                    likes: "3.7K",
                    mainImg: "https://pic.rmb.bdstatic.com/bjh/240921/41df6732d5e47984b9a140ca1d5e686948.jpeg",
                    gallery: [
                        "https://img2.baidu.com/it/u=1731776591,822848932&fm=253&app=138&f=JPEG?w=500&h=667",
                        "https://pic.rmb.bdstatic.com/bjh/240921/ce5872a05b134144cf6abbbf742150fd6722.jpeg",
                        "https://pic.rmb.bdstatic.com/bjh/240921/ab6d782c929fe35d74b869bf7e1d7690775.jpeg"
                    ]
                },
                    8: {
                    title: "侘寂风客厅",
                    subtitle: "质朴自然的治愈空间，让生活回归本真",
                    room: "客厅",
                    style: "侘寂风",
                    description: "这款侘寂风客厅设计打造出质朴自然的治愈空间，让生活回归本真。手工质感墙面搭配藤编吊灯，裸露梁结构与亚麻布艺沙发营造原始粗犷之美。微水泥地面融合原木茶几，自然光影透过纸灯笼营造柔和氛围。素色肌理与不对称布局展现残缺之美，绿植与粗陶花器点缀出自然生机。",
                    features: [
                        "手工质感微水泥墙面",
                        "粗陶花器与绿植点缀",
                        "裸露梁结构与原木横梁",
                        "不对称布局设计",
                        "纸灯笼与暖光照明",
                        "亚麻布艺与藤编家具"
                    ],
                    likes: "5.2K",
                    mainImg: "https://img0.baidu.com/it/u=3791429446,711977747&fm=253&app=138&f=JPEG?w=1305&h=800",
                    gallery: [
                        "https://img1.baidu.com/it/u=4262684405,2227795600&fm=253&app=138&f=JPEG?w=800&h=1067",
                        "https://img2.baidu.com/it/u=188484043,1137724118&fm=253&app=138&f=JPEG?w=800&h=1200",
                        "https://img1.baidu.com/it/u=211406844,52869914&fm=253&app=138&f=JPEG?w=800&h=1067g"
                    ]
                }
            };

            // 点击卡片打开模态框
            cards.forEach(card => {
                card.addEventListener('click', () => {
                    const id = card.getAttribute('data-id');
                    if (caseData[id]) {
                        loadCaseData(id);
                        modal.style.display = 'block';
                        document.body.style.overflow = 'hidden'; // 防止背景滚动
                    }
                });
            });

            // 关闭模态框
            closeModal.addEventListener('click', () => {
                modal.style.display = 'none';
                document.body.style.overflow = 'auto';
            });

            // 点击模态框外部关闭
            window.addEventListener('click', (e) => {
                if (e.target === modal) {
                    modal.style.display = 'none';
                    document.body.style.overflow = 'auto';
                }
            });

            // 加载案例数据到模态框
            function loadCaseData(id) {
                const data = caseData[id];
                if (!data) return;
                
                // 更新主图
                const mainImg = document.getElementById('modal-main-img');
                mainImg.src = data.mainImg;
                mainImg.alt = data.title;
                
                // 更新标题和副标题
                document.getElementById('modal-title').textContent = data.title;
                document.getElementById('modal-subtitle').textContent = data.subtitle;
                
                // 更新房间和风格
                document.getElementById('modal-room').textContent = data.room;
                document.getElementById('modal-style').textContent = data.style;
                
                // 更新描述
                document.getElementById('modal-description').textContent = data.description;
                
                // 更新特点
                const featuresContainer = document.getElementById('modal-features');
                featuresContainer.innerHTML = '';
                data.features.forEach(feature => {
                    featuresContainer.innerHTML += `
                        <div class="feature-item">
                            <i class="fas fa-check-circle"></i>
                            <span>${feature}</span>
                        </div>
                    `;
                });
                
                // 更新点赞数
                document.getElementById('modal-likes').textContent = data.likes;
                
                // 更新图库
                const galleryContainer = document.getElementById('modal-gallery');
                galleryContainer.innerHTML = '';
                
                // 添加图库图片
                data.gallery.forEach((imgUrl, index) => {
                    galleryContainer.innerHTML += `
                        <div class="gallery-item">
                            <img src="${imgUrl}" alt="图库图片 ${index+1}">
                        </div>
                    `;
                });
            }
            
            // 小红书搜索功能
            const form = document.getElementById("xiaohongshu-search");
            const input = document.getElementById("search-keyword");
            const hintBox = document.getElementById("searchHint");
            const searchTermSpan = document.querySelector("#searchHint .searchTerm");
            const trySearchLinks = document.querySelectorAll("#try-search");
            
            // 表单提交
            form.addEventListener("submit", function (event) {
                event.preventDefault();
                const keyword = input.value.trim();
                if (keyword) {
                    // 显示搜索提示
                    searchTermSpan.innerText = keyword;
                    hintBox.style.display = "block";
                    
                    // 模拟搜索过程
                    setTimeout(() => {
                        // 在实际应用中，这里会调用后端搜索接口
                        // 这里模拟搜索完成后跳转到小红书
                        const xhsUrl = `https://www.xiaohongshu.com/search_result?keyword=${encodeURIComponent(keyword)}`;
                        window.open(xhsUrl, "_blank");
                        
                        // 隐藏提示框
                        hintBox.style.display = "none";
                    }, 1500);
                } else {
                    // 如果输入为空，给用户一个提示
                    input.placeholder = "请输入搜索关键词...";
                    input.focus();
                }
            });
            
            // "试试搜搜"链接点击事件
            trySearchLinks.forEach(link => {
                link.addEventListener('click', (e) => {
                    e.preventDefault();
                    input.value = e.target.textContent;
                    form.dispatchEvent(new Event('submit'));
                });
            });
        });
    </script>
</body>
</html>